<template>
  <div>
    <a-modal
      :visible="visible"
      @update:visible="result"
      title="Basic Modal"
      @ok="handleOk"
      @cancel="cancel"
    >
      <slot :data="str" name="text"></slot>
    </a-modal>
  </div>
</template>
<script>
import { defineComponent, ref, getCurrentInstance } from "vue";
export default defineComponent({
  props: {
    visible: Boolean,
    cancel: {
      type: Function,
      default: function () {},
    },
  },
  emits: ["update:visible"],
  setup(props, ctx) {
    const self = getCurrentInstance();

    console.log(props, ctx, self);
    const str = ref("hello world");
    const showModal = () => {};
    const cancel = function (e) {
      console.log(e);
      self.emit("update:visible", false);
      props.cancel();
    };
    return {
      str,
      showModal,
      cancel,
    };
  },
  methods: {
    handleOk: function (e) {
      console.log(e);
      this.$emit("update:visible", false);
      this.$emit("ok");
    },

    result(e) {
      console.log(e);
    },
  },
});
</script>
